<script>
  import $ from '../dfish.js'
  import {
    h
  } from 'vue'
  import Button from './Button.vue'
  import Menu from './Menu.vue'
  import Img from './Img.vue'
  import WidgetAbs from './WidgetAbs.vue'

  export default {
    name: 'w-menubutton',
    mixins: [Button],
    methods: {
      exec(...args) {
        return this.parentMenu.getRoot().getCommander().exec(...args)
      },
      linkTarget(a) {
        if (this.x.target) {
          const tar = this.ownerView.find(this.x.target)
          tar && tar.parentNode.setFocus(this.x.target)
        }
      },
      drop() {
        if (this.showDrop) return
        this.closeSub()
        this.showDrop = true
        this.parentMenu.subMenu = this
      },
      onclick(e) {
        if (this.isMore) return
        this.trigger(e)
        setTimeout(() => this.parentMenu.root.close(), 10)
      },
      onmouseenter(e) {
        !this.x.disabled && e.currentTarget.classList.add('z-hv')
        if (this.isMore) {
          this.drop()
        } else {
          this.closeSub()
        }
      },
      closeSub() {
        if (this.parentMenu.subMenu) {
          this.parentMenu.subMenu.showDrop = false
          this.parentMenu.subMenu = null
        }
      },
      clickClose(e) {
        e.stopPropagation()
        e.runType = 'click:close'
        this.trigger(e)
      },
      html_slots() {
        let t = this.x.text
        let r = []
        let src = this.x.icon
        let font = src && src.startsWith('.') && !src.includes('/')
        r.push(!src || font ? h('i', {
          class: 'w-menubutton-icon f-flex-center f-height ' + (src ? src.replace(/\./g, '') : '')
        }) : h('img', {
          src: src,
          class: 'w-menubutton-icon f-flex-center f-height'
        }))

        if (t) {
          r.push(h('div', {
            class: 'w-menubutton-text f-line-1'
          }, t))
        }
        if (this.x.closable) {
          r.push(h('div', {
            class: 'w-menubutton-close'
          }, h('i', {
            class: 'w-menubutton-close-icon f-i f-i-close',
            onclick: this.clickClose
          })))
        }
        r.push(h(Img, {
          class: 'w-menubutton-drop f-flex-center f-height',
          src: this.isMore ? (this.x.dropIcon || '.f-i .f-i-caret-right') : ''
        }))
        if (this.showDrop) {
          r.push(h(Menu, {
            autoHide: true,
            context: this,
            ownproperty: true,
            dropClass: this.x.dropClass || this.parentMenu.x.dropClass,
            snap: {
              target: () => this.el(),
              position: '21,12',
              indent: 1
            },
            on: {
              close: () => this.showDrop = null
            }
          }, this.$slots))
        }

        return r
      }
    },
    computed: {
      tagName() {
        return 'button'
      },
      isMore() {
        return !!this.$slots.default
      },
      parentMenu() {
        let p = this.provideView
        while (p && (!p.isEntity || !p.isView)) p = p.provideView
        return p
      },
      ownerView() { // 因为业务会调用 $.vm(event), 所以返回commander的view
        return this.parentMenu.rootCommander.ownerView
      },
      html_props() {
        return {
          disabled: this.x.disabled,
          class: {
            'z-on': this.isCurrent,
              'z-ds': this.x.disabled
          },
          onmouseenter: this.onmouseenter,
          onmouseleave: !this.x.disabled && (e => e.currentTarget.classList.remove('z-hv')),
          onclick: this.onclick
        }
      }
    },
    mounted() {
      if (this.isCurrent) {
        this.linkTarget()
      }
    },
  }
</script>

<style>
  .w-menubutton {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    margin: 0;
    height: 32px;
    background: #fff;
    flex-shrink: 0;
  }

  .w-menubutton .f-i {
    color: #999;
  }

  .w-menubutton-icon {
    width: 30px;
  }

  .w-menubutton-text {
    display: flex;
    flex: 1;
    align-items: center;
  }

  .w-menubutton-drop {
    width: 30px;
    margin-left: 5px;
  }

  .w-menubutton>.w-menubutton-close {
    margin-right: -5px;
    flex-shrink: 0;
    color: #aaa;
  }

  .w-menubutton-close-icon:hover {
    color: #f00;
  }

  .w-menubutton.z-hv,
  .w-menubutton.z-drop {
    background: #f8f8f8;
  }

  .w-menubutton.z-ds {
    background-color: #eee;
    color: #777;
    cursor: default;
  }

  .w-menubutton.z-ds .w-menubutton-icon {
    color: #bbb;
  }
</style>
